import React, {Component} from 'react';
import { Menu, Icon ,Layout } from 'antd';
import Artical from './artic/Artical';
import Download from '../download/Download';
import Markdown from "../markdown/Markdown";

require('../main/Workbench.css')

const {Header, Content} = Layout;

class Workbench extends Component {

    constructor(props){
        super(props);
        this.state={
            action:'',
            key:'1',
            setting: false,
        }
    };


    onSelect=(item, key, selectedKeys )=>{
  
        if(item.key!=='setting:1'){
          this.setState({key:item.key,setting:false});
        }else{
          this.setState({setting:true});
        }
      }
      componentDidMount(){
  
      }

  render() {
    var obj;
    switch(this.state.key){
      case '1':
      obj=<Artical/>
      break;
      case '2':
      obj=<Download/>
      break;
      case '3':
      obj=<Markdown/>
      break;
      default : 
    //   obj=<Welcome/>
    }
    return (

        <Layout>
            <Header style={{ width: 150,height : 676}}>
                <Menu
                onClick={this.onSelect}
                defaultSelectedKeys={['1']}
                mode="inline"
                theme="dark"
                className="menu1"
                >
                <Menu.Item key="1">
                <Icon type="file-search" />
                    <span>文章列表</span>
                </Menu.Item>
                <Menu.Item key="2">
                    <Icon type="download" />
                    <span>资源下载</span>
                </Menu.Item>
                <Menu.Item key="3">
                <Icon type="edit" />
                    <span>在线编辑</span>
                </Menu.Item>
                </Menu>
            </Header>

            <Content className="content">
                {
                    obj
                }
            </Content>
        </Layout>
    );
  }
}

export default Workbench;